<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="编辑" :defaultFullscreen="true" @ok="handleSubmit" destroyOnClose>
    <Tabs v-model:activeKey="activeKey" @change="handleTabChange" :destroy-inactive-tab-pane="false">
      <TabPane key="2" tab="字段信息">
        <GenTableColumn ref="genTableColumnRef" :activeKey="activeKey" v-model:tableColumns="tableColumns" />
        <!-- <Demo></Demo> -->
      </TabPane>
      <TabPane key="3" tab="页面属性">
        <PageAttributeColumn ref="pageAttributeColumnRef" :activeKey="activeKey" v-model:tableColumns="tableColumns"/>
        <!-- <Demo></Demo> -->
      </TabPane>
      <TabPane key="4" tab="索引">
        <GenTableIndex ref="genTableIndexRef" :activeKey="activeKey" :rowId="rowId" v-model:tableColumns="tableColumns" />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import GenTableColumn from "./tabs/GenTableColumn.vue"
  import Demo from "./tabs/Demo.vue"
  import GenTableIndex from "./tabs/GenTableIndex.vue"
  import PageAttributeColumn from "./tabs/PageAttributeColumn.vue"
  import { TabPane, Tabs } from "ant-design-vue"
  import { saveOrUpdateGenTableInfo, listGenTableColumn, getGenTable } from "../codeGen.api"
  import { ref, onUnmounted } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  const { createMessage } = useMessage()
  const activeKey = ref("-1")
  const preActiveKey = ref("-1")
  const rowId = ref()
  const tableColumns = ref()
  const genTable = ref()

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    activeKey.value = "2"
    preActiveKey.value = "2"
    // await resetGenInfoFields();
    setModalProps({ confirmLoading: false, minHeight: 80 })
    rowId.value = data.record.id
    genTable.value = await getGenTable(rowId.value)
    tableColumns.value = await listGenTableColumn(rowId.value)
    // const result = await getInfo(unref(rowId));
  })
  const baseInfoRef = ref()
  const genTableColumnRef = ref()
  const genInfoRef = ref()
  const genTableIndexRef = ref()
  const pageAttributeColumnRef = ref()
  const timeout = ref<any>()
  const handleTabChange = (activeKey) => {
    console.log("activeKey: ", activeKey)
  }

  onUnmounted(() => {
    clearTimeout(timeout.value)
  })


  //表单提交事件
  async function handleSubmit(exit) {
    const key = "code_gen_submit"
    createMessage.loading({
      content: `保存中...`,
      key,
      duration: 0,
    })
    timeout.value = setTimeout(async () => {
      try {
        let isSuccess =
          (await validateRef("4", genTableIndexRef)) &&
          (await validateRef("2", genTableColumnRef)) &&
          (await validateRef("3", pageAttributeColumnRef))

        if (!isSuccess) {
          return
        }

        const genTableIndexData = genTableIndexRef.value?.getData()
        const data = {
          columnList: tableColumns.value,
          indexList: genTableIndexData,
        }
        console.log("submit data: ", data)
        await saveOrUpdateGenTableInfo(data)
        exit && closeModal()
        createMessage.destroy(key)
        createMessage.success("保存成功")
        //刷新列表
        // emit('success', {isUpdate: unref(isUpdate), values: {...values, id: rowId.value}});
      } catch (e) {
        exit && closeModal()
      } finally {
        createMessage.destroy(key)
        activeKey.value = "1"
        setModalProps({ confirmLoading: false })
      }
    }, 200)
  }

  const validateRef = async (key: string, ref: any) => {
    if (ref && ref.value) {
      const isSuccess = await ref.value.validate(() => (activeKey.value = key))
      if (!isSuccess) {
        createMessage.error("表单校验未通过")
        console.log("校验失败 activeKey.value: ", key)
        return false
      }
    }
    return true
  }
</script>
